<template>
  <div class="pile-container">
    <div class="controls">
      <button @click="showAllPiles">显示全部桩</button>
      <button @click="showStartedPiles">显示已开孔桩</button>
      <button @click="showPouredPiles">显示已浇筑桩</button>
    </div>
    <svg :width="svgWidth" :height="svgHeight">
      <!-- 网格背景 -->
      <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
        <path d="M 50 0 L 0 0 0 50" fill="none" stroke="#eee" stroke-width="0.5"/>
      </pattern>
      <rect width="100%" height="100%" fill="url(#grid)"/>

      <!-- 坐标原点标记 -->
      <circle cx="0" cy="0" r="3" fill="black"/>
      <text x="5" y="-5" fill="black" font-size="10">原点</text>

      <!-- 桩点 -->
      <g v-for="(pile, index) in filteredPiles" :key="index">
        <circle
            :cx="transformX(pile.coordinateX)"
            :cy="transformY(pile.coordinateY)"
            r="5"
            :fill="getPileColor(pile)"
            @mouseover="showTooltip(pile)"
            @mouseout="hideTooltip"
        />
        <text
            :x="transformX(pile.coordinateX) + 8"
            :y="transformY(pile.coordinateY) - 8"
            fill="black"
            font-size="10"
        >{{ pile.pileNumber }}</text>
      </g>

      <!-- 起点和终点标记 -->
      <g v-if="startPile">
        <circle
            :cx="transformX(startPile.coordinateX)"
            :cy="transformY(startPile.coordinateY)"
            r="8"
            fill="none"
            stroke="green"
            stroke-width="2"
            stroke-dasharray="5,3"
        />
        <text
            :x="transformX(startPile.coordinateX) + 12"
            :y="transformY(startPile.coordinateY) + 5"
            fill="green"
            font-size="12"
            font-weight="bold"
        >起点</text>
      </g>

      <g v-if="endPile">
        <circle
            :cx="transformX(endPile.coordinateX)"
            :cy="transformY(endPile.coordinateY)"
            r="8"
            fill="none"
            stroke="red"
            stroke-width="2"
            stroke-dasharray="5,3"
        />
        <text
            :x="transformX(endPile.coordinateX) + 12"
            :y="transformY(endPile.coordinateY) + 5"
            fill="red"
            font-size="12"
            font-weight="bold"
        >终点</text>
      </g>

      <!-- 工具提示 -->
      <g v-if="tooltipPile">
        <rect
            :x="tooltipX + 10"
            :y="tooltipY - 25"
            width="150"
            height="70"
            rx="5"
            fill="white"
            stroke="#ccc"
            stroke-width="1"
        />
        <text :x="tooltipX + 20" :y="tooltipY - 10" fill="black" font-size="12">{{ tooltipPile.pileNumber }}</text>
        <text :x="tooltipX + 20" :y="tooltipY + 5" fill="black" font-size="12">坐标: {{ tooltipPile.coordinateX.toFixed(2) }}, {{ tooltipPile.coordinateY.toFixed(2) }}</text>
        <text :x="tooltipX + 20" :y="tooltipY + 20" fill="black" font-size="12">状态: {{ getPileStatus(tooltipPile) }}</text>
      </g>
    </svg>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getPiles } from "@/apis/api_pile.js";

const pileCoordinates = ref([]);
const filteredPiles = ref([]);
const svgWidth = 800;
const svgHeight = 800;
const startPile = ref(null);
const endPile = ref(null);
const tooltipPile = ref(null);
const tooltipX = ref(0);
const tooltipY = ref(0);

// 坐标转换参数
const scaleFactor = ref(0.0001); // 缩放因子
const offsetX = ref(3419000);    // X轴偏移量
const offsetY = ref(493000);     // Y轴偏移量

// 坐标转换函数
const transformX = (x) => (x - offsetX.value) * scaleFactor.value;
const transformY = (y) => svgHeight - (y - offsetY.value) * scaleFactor.value;

// 获取桩的颜色
const getPileColor = (pile) => {
  if (pile.holeOpeningTime && pile.pouringTime) return 'green'; // 已浇筑
  if (pile.holeOpeningTime) return 'orange'; // 已开孔未浇筑
  return 'blue'; // 未开孔
};

// 获取桩的状态文本
const getPileStatus = (pile) => {
  if (pile.holeOpeningTime && pile.pouringTime) return '已浇筑';
  if (pile.holeOpeningTime) return '已开孔未浇筑';
  return '未开孔';
};

// 显示工具提示
const showTooltip = (pile) => {
  tooltipPile.value = pile;
  tooltipX.value = transformX(pile.coordinateX);
  tooltipY.value = transformY(pile.coordinateY);
};

// 隐藏工具提示
const hideTooltip = () => {
  tooltipPile.value = null;
};

// 筛选桩的函数
const showAllPiles = () => {
  filteredPiles.value = [...pileCoordinates.value];
};

const showStartedPiles = () => {
  filteredPiles.value = pileCoordinates.value.filter(pile => pile.holeOpeningTime);
};

const showPouredPiles = () => {
  filteredPiles.value = pileCoordinates.value.filter(pile => pile.pouringTime);
};

onMounted(async () => {
  try {
    const res1 = await getPiles(1, 492, {});
    console.log('API返回数据:', res1.data.records);
    const res=res1.data;
    if (res && res.records && res.records.length > 0) {

      console.log(res.records)
      pileCoordinates.value = res.records;
      filteredPiles.value = [...res.records];

      // 找到第一个开孔不为空且浇筑为空的桩作为起点
      startPile.value = res.records.find(
          pile => pile.holeOpeningTime && !pile.pouringTime
      );

      // 找到最后一个开孔不为空且浇筑为空的桩作为终点
      const startedButNotPoured = res.records.filter(
          pile => pile.holeOpeningTime && !pile.pouringTime
      );
      endPile.value = startedButNotPoured.length > 0
          ? startedButNotPoured[startedButNotPoured.length - 1]
          : null;

      console.log('起点桩:', startPile.value);
      console.log('终点桩:', endPile.value);
    } else {
      console.warn('未从API获取到桩数据');
    }
  } catch (error) {
    console.error('获取桩坐标数据时出错:', error);
  }
});
</script>

<style scoped>
.pile-container {
  position: relative;
  margin: 20px;
}

.controls {
  margin-bottom: 10px;
}

button {
  padding: 8px 16px;
  margin-right: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>